<template>
  <el-row :gutter="15" class="businessRow">
    <el-col :span="6">
      <div class="leftBox">
        <div class="toolBox">
          <el-button
            icon="el-icon-plus"
            type="primary"
            :disabled="userAuthority == 1"
            @click="businessDialog.visible = true"
          >
            新增
          </el-button>
          <!-- <el-input
						class="searchBusinessInput"
						prefix-icon="el-icon-search"
						v-model="business.filters.NAME"
						placeholder="搜索业务系统..."
					></el-input> -->
          <el-button
            icon="el-icon-delete"
            type="danger"
            :disabled="userAuthority == 1"
            v-show="businessCardActivate != '0'"
            @click="handleClick('deleteBusiness')"
          >
            删除
          </el-button>
          <div style="margin-top: 15px">
            <el-input
              clearable
              v-model="selectBusiness"
              placeholder="请输入业务系统名"
            ></el-input>
          </div>
        </div>
        <el-divider></el-divider>
        <div
          class="businessBox"
          v-loading="business.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-card
            class="businessCard"
            v-for="(item, index) in BusinessData"
            :key="item.BID"
            :shadow="businessCardShadow(item.BID)"
            :class="businessCardClass(item.BID)"
            @click.native="handleClick('businessCard', item.BID)"
            @mouseenter.native="handleMouseEnter('businessCard', item.BID)"
            @mouseleave.native="handleMouseLeave('businessCard', item.BID)"
          >
            <el-row :gutter="10">
              <el-col :span="20">
                <div>
                  <span>{{ index + 1 }}</span>
                  <el-divider direction="vertical"></el-divider>
                  {{ item.NAME }}
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  v-if="
                    (item.BID != '0' && businessCardHover[item.BID]) ||
                    item.BID == businessCardActivate
                  "
                >
                  <el-button
                    icon="el-icon-edit"
                    type="text"
                    size="mini"
                    v-show="item.BID != '0'"
                    :disabled="userAuthority == 1"
                    @click="handleClick('editBusiness', item)"
                  >
                    编辑
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="rightBox">
        <V-BusinessNode :CountData="CountData"></V-BusinessNode>
      </div>
    </el-col>

    <!-- 弹窗：新增、编辑 -->
    <el-dialog
      title=""
      :visible.sync="businessDialog.visible"
      width="30%"
      @close="handleClose"
    >
      <el-form :model="businessDialog.form" label-width="120px">
        <el-form-item label="业务系统名称">
          <el-input
            v-if="businessDialog.form.opera != businessDialog.opera_Modify"
            v-model="businessDialog.form.data[0].NAME"
            @keyup.enter.native="handleClick('createNewBusiness')"
          ></el-input>
          <el-input
            v-if="businessDialog.form.opera == businessDialog.opera_Modify"
            v-model="businessDialog.form.data[0].NAME"
            @keyup.enter.native="handleClick('editBusinessSave')"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="业务系统类别">
					<el-radio-group v-model="businessDialog.form.data[0].TYPE">
						<el-radio-button label="Database">数据库</el-radio-button>
						<el-radio-button label="Host">服务器</el-radio-button>
					</el-radio-group>
				</el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="businessDialog.visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleClick('createNewBusiness')"
          v-if="businessDialog.form.opera != businessDialog.opera_Modify"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="handleClick('editBusinessSave')"
          v-if="businessDialog.form.opera == businessDialog.opera_Modify"
          >保 存</el-button
        >
      </div>
    </el-dialog>

    <v-Dialog
      :dialogVisibleAdd="dialogVisibles"
      :dialogVisibleEdit="dialogVisibleEdits"
      @dialogCloseAdd="dialogCloseAdd"
      @dialogCloseEdit="dialogCloseEdit"
      :dialogData="dialogData"
    ></v-Dialog>
  </el-row>
</template>

<script>
import { submitAdmin, getBusinessNode } from "@/api/index.js";
import tableColumns from "./BusinessColumns";
import vDialog from "./businessDialog";
import vPagination from "common/Pagination.vue";
import { getUserData } from "@/utils/IndexedDB.js";
import VBusinessNode from "./components/BusinessNode.vue";
export default {
  name: "mgBusiness",
  components: {
    vDialog,
    vPagination,
    VBusinessNode,
  },
  data() {
    return {
      postData: {
        opera: "",
        curPage: 1,
        pageSize: 10000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "exactquery", // 精确查询
        filters: {},
      },
      dataTotal: 100,
      tableColumns: tableColumns,
      dialogVisibles: false,
      dialogVisibleEdits: false,

      dialogData: {
        SERVICESNAME: "",
        SUPPORT: "",
        REMARK: "",
        ID: "",
        CREATEDATE: "",
      },
      tabledata: [
        {
          ID: "1",
          SERVICESNAME: "贷款",
          SUPPORT: "会计",
          REMARK: "拿钱做事",
          CREATEDATE: "2021-04-08 10:00:00",
          SERVICESSTATUS: 1,
        },
        {
          ID: "2",
          SERVICESNAME: "贷款",
          SUPPORT: "会计",
          REMARK: "拿钱做事",
          CREATEDATE: "2021-04-08 10:00:00",
          SERVICESSTATUS: 1,
        },
        {
          ID: "3",
          SERVICESNAME: "贷款",
          SUPPORT: "会计",
          REMARK: "拿钱做事",
          CREATEDATE: "2021-04-08 10:00:00",
          SERVICESSTATUS: 0,
        },
      ],
      business: {
        get_opera: "GetServicesName",
        del_opera: "DeleteServicesName",
        filters: {
          NAME: "",
        },
        loading: false,
        data: [],
      },
      businessCardActivate: "",
      businessCardHover: {},
      businessDialog: {
        opera_Create: "CreateServicesName",
        opera_Modify: "ModifyServicesName",
        visible: false,
        form: {
          opera: "",
          data: [
            {
              NAME: "",
              TYPE: "测试分类", // Database、Host、All
            },
          ],
        },
      },
      userAuthority: "",
      selectBusiness: "",
      CountData: {},
    };
  },
  created() {
    this.getBusinessData();
    // 选中默认
    this.businessCardActivate = "0";
  },
  computed: {
    BusinessData() {
      return this.business.data.filter((d) => {
        return d.NAME.includes(this.selectBusiness);
      });
    },
  },
  methods: {
    async getBusinessData() {
      await getUserData("userBase", "infoBase", 0).then((res) => {
        this.userType = res.ms_type;
        this.power = res.power;
        this.userAuthority = res.userAuthority;
        this.userEndTime = res.endTime;
      });
      this.business.loading = true;

      this.postData.opera = this.business.get_opera;
      this.postData.filters = this.business.filters;
      submitAdmin({
        postData: JSON.stringify(this.postData),
      }).then((res) => {
        this.business.data = res.data;
        this.InitBusinessNode(this.businessCardActivate);
        this.business.loading = false;
      });
    },
    // 鼠标点击
    handleClick(flag, data) {
      let _this = this;
      let _run = {
        createNewBusiness: function () {
          _this.businessDialog.form.opera = _this.businessDialog.opera_Create;
          _this.submitBusinessData();
        },
        editBusiness: function () {
          _this.businessDialog.form.opera = _this.businessDialog.opera_Modify;
          _this.businessDialog.form.data[0].NAME = data.NAME;
          _this.businessDialog.visible = true;
        },
        editBusinessSave: function () {
          _this.submitBusinessData(_this.businessCardActivate);
        },
        businessCard: function () {
          _this.businessCardActivate = data;
        },
        deleteBusiness: function () {
          _this.submitDeleteBusiness();
        },
      };
      // 执行匹配的函数
      _run[flag]();
    },
    // 鼠标移入
    handleMouseEnter(box, key) {
      if (this.businessCardHover.hasOwnProperty(key)) {
        this.businessCardHover[key] = true;
      } else {
        /**
         * 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
         * 可以用 set 添加响应式 property
         */
        this.$set(this.businessCardHover, key, true);
      }
    },
    // 鼠标移出
    handleMouseLeave(box, item) {
      this.businessCardHover[item] = false;
    },
    submitBusinessData(bid) {
      let _postData = this.businessDialog.form;
      if (bid) {
        _postData.data[0].BID = bid;
      }

      submitAdmin({
        postData: JSON.stringify(_postData),
      }).then((res) => {
        if (res.includes("成功")) {
          this.$message({
            message: res,
            type: "success",
          });

          this.getBusinessData();
          this.businessDialog.visible = false;
        } else {
          this.$message({
            message: res,
            type: "error",
          });
        }
      });
    },
    businessCardShadow(businessBID) {
      if (businessBID == this.businessCardActivate) {
        return "always";
      } else {
        return "hover";
      }
    },
    businessCardClass(businessBID) {
      if (businessBID == this.businessCardActivate) {
        return "businessCardBG";
      } else {
        return "";
      }
    },
    handleClose() {
      this.businessDialog.form = this.$options.data().businessDialog.form;
    },
    submitDeleteBusiness() {
      this.$confirm("此操作将永久删除选中业务系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.businessCardActivate == "0") {
            this.$message({
              message: "非法操作，禁止删除默认业务系统！",
              type: "error",
            });
          } else {
            let _data = {
              opera: this.business.del_opera,
              bid: this.businessCardActivate,
            };

            submitAdmin({
              postData: JSON.stringify(_data),
            }).then((res) => {
              if (res == "删除成功") {
                this.$message({
                  message: "删除成功！",
                  type: "success",
                });

                this.getBusinessData();
                // 选中默认
                this.businessCardActivate = "0";
              } else {
                this.$message({
                  message: "删除失败，请重试！",
                  type: "error",
                });
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    dialogCloseAdd() {
      this.dialogVisibles = false;
    },
    dialogCloseEdit() {
      this.dialogVisibleEdits = false;
    },
    tableEdit(row) {
      (this.dialogVisibleEdits = true), (this.dialogData = row);
    },
    tableDelect(id) {
      this.$confirm("确定删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    dialogOpen() {
      this.dialogVisibles = true;
    },

    //开发中 切换业务状态
    servicess(status) {
      switch (status.SERVICESSTATUS) {
        case 1:
          this.$confirm("是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              status.SERVICESSTATUS = 0;
              this.$message({
                type: "success",
                message: "关闭成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "关闭失败",
              });
            });

          break;
        case 0:
          this.$confirm("是否开启?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              status.SERVICESSTATUS = 1;
              this.$message({
                type: "success",
                message: "开启成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "开启失败",
              });
            });
          break;
      }
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.getBusinessData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getBusinessData();
    },
    InitBusinessNode(data) {
      let ActivateItem = this.business.data.filter((item) => {
        return item.BID === data;
      });
     
      if (ActivateItem.length > 0) {
        getBusinessNode({ system: ActivateItem[0].NAME }).then((res) => {
          if (res) {

            this.CountData = res;
          } else {
            this.CountData = {};
            this.$message.error("获取业务系统节点错误");
          }
        });
      }
    },
  },
  watch: {
    businessCardActivate: function (Newval, oldval) {

      this.InitBusinessNode(Newval);
    },
  },
};
</script>

<style scoped>
.businessRow > .el-col > div {
  padding: 15px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 工具栏 */
.businessRow > .el-col > div.leftBox .toolBox {
  display: inline-block;
}
.businessRow > .el-col > div.leftBox .toolBox button:first-child {
  margin-right: 15px;
}
.businessRow > .el-col > div.leftBox .toolBox .searchBusinessInput {
  width: 200px;
  margin-right: 15px;
}
/* 左边 */
.businessRow > .el-col > div.leftBox > .businessBox > .businessCard {
  margin-bottom: 10px;
}
.businessRow
  > .el-col
  > div.leftBox
  .businessBox
  > .businessCard
  > .el-card__body {
  padding: 10px 15px;
}
.businessRow
  > .el-col
  > div.leftBox
  .businessBox
  > .businessCard
  > .el-card__body
  > .el-row
  > .el-col {
  line-height: 32px;
}
.businessRow
  > .el-col
  > div.leftBox
  > .businessBox
  > .businessCard
  > .el-card__body
  > .el-row
  > .el-col
  .el-button--text {
  color: darkcyan;
}
.businessRow
  > .el-col
  > div.leftBox
  > .businessBox
  > .businessCard
  > .el-card__body
  > .el-row
  > .el-col
  .el-button--text:hover {
  color: cadetblue;
}
.businessRow
  > .el-col
  > div.leftBox
  > .businessBox
  > .businessCard
  > .el-card__body
  > .el-row
  > .el-col:last-child {
  text-align: left;
}
.businessRow > .el-col > div.leftBox > .businessBox > .businessCardBG {
  color: currentColor;
  background: antiquewhite;
}
.rightBox-head {
  margin-bottom: 20px;
}

.businessBox {
  height: calc(70vh /var(--zoom));
  overflow-y: scroll;
}
.businessBox::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.businessBox::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 3px;
}
</style>
